<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:replace="tpl :: common_head()"></th:block>
		<title>菜单管理</title>
		<style>
		.panel{display:table;}
		.panel-left,.panel-right{display: table-cell;*display:inline-block;}
		.panel-left{width:700px;}
		.panel-left .info li{padding:8px;line-height:26px;color:#666;border-bottom:solid 1px #eaeaea;}
		.panel-right{width:200px;border-left:solid 1px #e7e7eb;line-height:32px;}
		.panel-right ul{border-bottom:solid 1px #e7e7eb;}
		.panel-right input[type=radio]{display:none;}
		.panel-right label{display:block;padding-left:32px;cursor:pointer;}
		.panel-right label:hover{background:#f4f5f9;}
		.panel-right input[type=radio]:checked + label{background:#f4f5f9;}
		.operation{background: #f4f5f9;line-height:42px;height:42px;}
		.i-btn{line-height:26px;display:inline-block;margin-left:12px;border:solid 1px #dddddd;background:white;padding:0 16px;color:#666;cursor:pointer;}
		.i-btn:hover{background:#e7e7eb;}
		.i-btn.disabled{background:#dddddd;color:white;}
		#edit{color:#459ae9;cursor:pointer;text-decoration: none;}
		</style>
	</head>
	<body th:with="entrance='/system/menu/index'">
		<th:block th:replace="tpl :: common_body(~{::.main-right})">
			<div class="main-right">
				<h1 class="main-right-h1">菜单管理</h1>
				<ul class="main-right-tab">
					<li class="selected">菜单列表</li>
				    <li><a href="0">新增菜单模块</a></li>
				</ul>
<form class="panel">
	<div class="panel-left" th:with="targetMenu=${menus.^[id==#root.targetMenuId]}">
		<div style="line-height:42px;padding-left:16px;">
			<th:block th:if="${targetMenu!=null}">
				模块名称：[[${targetMenu.name}]]&nbsp;<a id="edit" th:href="${targetMenuId}">修改</a>
			</th:block>
			<th:block th:if="${targetMenu==null}">暂无菜单</th:block>
		</div>
		<div class="operation"></div>
		<ul class="info" th:if="${targetMenu!=null}">
			<li th:each="n:${menus.?[parentId==#root.targetMenuId]}" >
				<span style="color:#333;">[[${n.name}]]</span>&nbsp;([[${n.url}]])
				<span style="float:right;" th:with="p=${permissions.^[id==#root.n.permissionId]}">所需权限：[[${p.domain}]]&nbsp;-&nbsp;[[${p.name}]]</span>
			</li>
		</ul>
	</div>
	<div class="panel-right">
		<ul>
			<li th:each="menu:${menus.?[parentId==null]}">
				<input th:id="'menuId'+${menu.id}" type="radio" name="menuId" th:value="${menu.id}" th:checked="${menu.id==targetMenuId}" />
				<label th:for="'menuId'+${menu.id}" th:text="${menu.name}"></label>
			</li>
		</ul>
	</div>
</form>
			</div>
		</th:block>
		<script>
			$(function(){
				$("input[type=radio]").change(function(){
					$("form").submit();
				})
			})
		</script>
	</body>
</html>